<template>
	<view>
		<div class="search-container">
			<view class="header-conatiner" :style="{paddingTop:statusBarHeight==0?47:statusBarHeight+ 'px',}">
			<!-- 	<view class="right">
					<span :class="current!=0?'on':''" @click="onItme(0)">常点</span><span class="line-c">|</span><span :class="current!=1?'on':''" @click="onItme(1)">推荐</span>
				</view> -->
				<view class="back" @click="back" v-if="backShow">
					<view class='iconfont icon-fanhui2'></view>
				</view>
				<view class="title">
					{{title}}
				</view>
			</view>
			<view class="serch-box" v-if="searchShow">
				<navigator :url="'/pages/columnGoods/goods_search/index'" hover-class="none" class="search">
					<text class="iconfont icon-xiazai5"></text>
					<view class='swiperTxt'>
						<swiper circular vertical :indicator-dots="false" 
							:autoplay="true" :interval="3000" :duration="300"
							:style="'height:'+200+'rpx;'"
							:disable-touch="false" style="height: 60rpx;"
						>
							<block v-for="(item,index) in hotWords" :key='index'>
								<swiper-item  @touchstart.stop="catchTouchMove" catchtouchmove="catchTouchMove">
									<view class="swiper-item-text">
										{{item.val}}
									</view>
								</swiper-item>
							</block>
						</swiper>
					</view>
					<view class="search-button">
						搜索
					</view>
				</navigator>
			</view>
		</div>
	</view>
</template>

<script>
var statusBarHeight = uni.getSystemInfoSync().statusBarHeight;
export default {
	data(){
		return{
			statusBarHeight:statusBarHeight,
		}
	},
	props:{
		hotWords:{
			type:Array,
			default:()=>{ return []}
		},
		backShow:{
			type:Boolean,
			default:true
		},
		title:{
			type:String,
			default:""
		},
		searchShow:{
			type:Boolean,
			default:true
		},
		backUrl:{
			type:String,
			default:"/pages/index/index"
		}
	},
	methods:{
		back(){
			if(this.backUrl == "back"){
				uni.navigateBack();
				return
			}
			uni.switchTab({
				url:"/pages/index/index?id=7"
			})
		},
		// swiper禁止滚动
		catchTouchMove(){
			return false;
		},
	}
}
</script>

<style lang="scss" scoped>
.search-container{
	position: fixed;
	top: 0;
	right: 0;
	left: 0;
	padding: 0rpx 40rpx;
	padding-bottom: 12rpx;
	background-color: #f3f3f3;
	z-index: 99;
}
.header-conatiner{
	font-size: 36rpx;
	line-height: 86rpx;
	font-weight: bold;
	display: flex;
	.title{
		text-align: center;
		flex-grow: 1;
	}
	
	.on{
		color: #999;
	}
	.line-c{
		padding: 0 8rpx;
	}
}
.serch-box{
	
	.search{
		display: flex;
		background-color: white;
		align-items: center;
		border-radius: 60rpx;
		padding: 4rpx;
		padding-left: 30rpx;
		border: 2rpx solid rgb(78, 172, 236);
		.swiperTxt{
			align-self: flex-start;
			overflow: hidden;
			// width: 100%;
			flex-grow: 1;
			height: 60rpx;
			.swiper-item-text{
				line-height: 60rpx;
				padding-left: 24rpx;
			}
		}
		.search-button{
			color: white;
			flex-shrink: 0;
			background-color: rgb(78, 172, 236);
			border-radius: 60rpx;
			padding: 12rpx 40rpx;
		}
	}
}
</style>